import { defineStore } from 'pinia'
import router from '@/router'
import { removeKeepalive, getKeepaliveKeys } from "@/utils/keepalive"
import { computed } from 'vue'

const useTagMenuStore = defineStore("tagMenu", () => {
    const tagMenu = ref([])
    const title = ref("")
    const tabPane = ref({})

    const getTagMenu = computed({
        set(_tagMenu) {
            tagMenu.value = _tagMenu
        },
        get() {
            return tagMenu.value
        }
    })
    const getTabPane = computed(() => tabPane.value)

    const addTagMenu = (route) => {
        if (!route || typeof route !== 'object') {
            return
        }

        const path = route.fullPath
        const name = route.meta.title
        const index = tagMenu.value.findIndex(item => item.path === path)
        const _title = title.value
        title.value = ""
        if (route.meta.onTag && index === -1) {
            tagMenu.value.push({
                path: path,
                name: name,
                title: _title,
                icon: route.meta.icon,
                parentId: route.meta.parentId
            })
        }
    }
    const closeTagMenu = (_tagMenu) => {
        const index = tagMenu.value.indexOf(_tagMenu)
        if (index < 0) return false
        tagMenu.value.splice(index, 1)
        removeKeepalive(_tagMenu.path)
        return true
    }
    const closeOtherTagMenu = (_tagMenu) => {
        tagMenu.value = [_tagMenu]
        removeOtherKeepalive(_tagMenu.path)
    }
    const updateTagMenu = (_tagMenu) => {
        tagMenu.value = [..._tagMenu]
    }
    const clearTagMenu = () => {
        tagMenu.value = []
        clearKeepalive()
    }
    const setTitle = (_title) => {
        title.value = _title
    }
    const setTabPane = (_tabPane) => {
        tabPane.value[router.currentRoute.value.fullPath] = _tabPane
    }
    const updateTagMenuTitle = (path, _title, newPath = "") => {
        const index = tagMenu.value.findIndex(item => item.path === path)
        if (index !== -1) {
            tagMenu.value[index].title = _title
            if (newPath && path !== newPath) {
                tagMenu.value[index].path = newPath
                removeKeepalive(path)
            }
        }
    }
    const removeOtherKeepalive = (path) => {
        for (let key of getKeepaliveKeys()) {
            if (key !== path) {
                removeKeepalive(key)
            }
        }
    }
    const clearKeepalive = () => {
        for (let key of getKeepaliveKeys()) {
            removeKeepalive(key)
        }
    }

    return {
        addTagMenu,
        closeTagMenu,
        closeOtherTagMenu,
        updateTagMenu,
        clearTagMenu,
        getTagMenu,
        getTabPane,
        setTitle,
        setTabPane,
        updateTagMenuTitle,
        removeKeepalive,
        removeOtherKeepalive,
        clearKeepalive,
        tagMenu
    }
}, {
    persist: {
        enabled: true,
        key: "tagMenuStore",
        storage: localStorage,
        paths: ["tagMenu"]
    }
})

export default useTagMenuStore